<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { formatColumn } from '@/utils/tools.js'
import { queryWelfarePeResultList, queryWelfarePeList } from '@/api/home'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const props = defineProps({
  policyInfo: {
    type: Object
  },
  dutyType: {
    type: String
  }
})
const emit = defineEmits(['openDetailModal'])

const peLoading = ref(false)
// penotes
const dynamicNoteColumns = computed(() => {
  return [
    {
      title: t('home.welfare.PNType'),
      dataIndex: 'peTypeName',
      width: 120,
      key: 'peTypeName',
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.welfare.PENotes'),
      dataIndex: 'note',
      key: 'note',
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.welfare.PNStartDate'),
      width: 120,
      dataIndex: 'effectiveDate',
      key: 'effectiveDate',
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.welfare.PNEndDate'),
      width: 120,
      dataIndex: 'expirationDate',
      key: 'expirationDate',
      customRender: ({ text, record, index }) => formatColumn(text)
    }
  ]
})
const noteDataSource = ref([])

// pe 规则

const dynamicRuleColumns = computed(() => {
  return [
    {
      title: t('home.welfare.PRICD9Code'),
      dataIndex: 'icdCode',
      key: 'icdCode',
      width: 120,
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.welfare.PRDescription'),
      dataIndex: 'notes',
      key: 'notes',
      width: 300,
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.welfare.PRType'),
      dataIndex: 'peTypeName',
      width: 120,
      key: 'peTypeName',
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.welfare.PRPaymentCap'),
      dataIndex: 'limitVal',
      width: 120,
      key: 'limitVal',
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.welfare.PRRemaining'),
      dataIndex: 'remainingVal',
      width: 100,
      key: 'remainingVal',
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.welfare.PRStartDate'),
      dataIndex: 'startDate',
      width: 100,
      key: 'startDate',
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.welfare.PREndDate'),
      dataIndex: 'endDate',
      width: 100,
      key: 'endDate',
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('global.action'),
      dataIndex: 'action',
      width: 100,
      key: 'action'
    }
  ]
})
const ruleDataSource = ref([])

// 特殊规则
const dynamicSRColumns = computed(() => {
  return [
    {
      title: t('home.welfare.SRRecipient'),
      dataIndex: 'objectLev',
      key: 'objectLev',
      width: 210,
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.welfare.SRDescription'),
      dataIndex: 'ruleDes',
      key: 'ruleDes',
      customRender: ({ text, record, index }) => formatColumn(text)
    }
  ]
})
const specialRuleDataSource = ref([])
async function getPeTableList() {
  peLoading.value = true
  const data = {
    insuredId: props.policyInfo.insuredId,
    grpPlanCode: props.policyInfo.grpPlanCode,
    customId: props.policyInfo.customer_id,
    employeeId: props.policyInfo.member_id,
    startDate: props.policyInfo.insuredEffectiveDate,
    endDate: props.policyInfo.insuredExpireDate,
    age: props.policyInfo.age
  }
  let res = null
  try {
    res = await queryWelfarePeList(data)
  } catch (err) {
    console.log('err', err)
  } finally {
    peLoading.value = false
  }
  if (res?.isSuccess) {
    noteDataSource.value = res.data.peNotes
    ruleDataSource.value = res.data.peRulInfo
    specialRuleDataSource.value = res.data.specialRulInfo
  }
}
// PE 认定
// 展开、收起
const arrowUp = ref(false)
function changeArrow() {
  arrowUp.value = !arrowUp.value
}
function handlePageChange(page, pageSize) {
  pagination.current = page
  pagination.pageSize = pageSize
  getResultList()
}
const pagination = reactive({
  current: 1,
  pageSize: 10,
  size: 'large',
  showSizeChanger: true,
  total: 0,
  onChange: handlePageChange,
  hideOnSinglePage: true
})
const dynamicPCColumns = computed(() => {
  return [
    {
      title: t('home.welfare.PCICD9Code'),
      dataIndex: 'icdCode',
      key: 'icdCode',
      width: 120,
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.welfare.PCICD9Des'),
      dataIndex: 'icd9Desc',
      key: 'icd9Desc',
      width: 140,
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.welfare.PCDeterminationResult'),
      dataIndex: 'statusName',
      key: 'statusName',
      width: 160,
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.welfare.PCPayDeny'),
      dataIndex: 'payStatusName',
      key: 'payStatusName',
      width: 120,
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.welfare.PCDeterminationNotes'),
      dataIndex: 'confDes',
      key: 'confDes',
      width: 180,
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.welfare.PCType'),
      dataIndex: 'peTypeName',
      key: 'peTypeName',
      width: 120,
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.welfare.PCStartDate'),
      dataIndex: 'startDate',
      key: 'startDate',
      width: 120,
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.welfare.PCEndDate'),
      dataIndex: 'endDate',
      key: 'endDate',
      width: 120,
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.welfare.PCRelatedClaim'),
      dataIndex: 'claimNo',
      key: 'claimNo',
      width: 120,
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.welfare.PCDeterminer'),
      dataIndex: 'confirmor',
      key: 'confirmor',
      width: 120,
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.welfare.PCDeterminationDate'),
      dataIndex: 'confDate',
      key: 'confDate',
      width: 160,
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.welfare.PCDiagnosis'),
      dataIndex: 'diagnose',
      key: 'diagnose',
      width: 120,
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.welfare.PCCompanyAbbr'),
      dataIndex: 'cshortName',
      key: 'cshortName',
      width: 120,
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.welfare.PCUnderwriter'),
      dataIndex: 'underwriterName',
      key: 'underwriterName',
      width: 120,
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.welfare.PCLastUpdated'),
      dataIndex: 'modifyDate',
      key: 'modifyDate',
      width: 120,
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.welfare.PCUpdatedBy'),
      dataIndex: 'operator',
      key: 'operator',
      width: 120,
      customRender: ({ text, record, index }) => formatColumn(text)
    }
  ]
})
const dataSource = ref([])
const loading = ref(false)
async function getResultList() {
  loading.value = true
  const data = {
    pageNum: pagination.current,
    pageSize: pagination.pageSize,
    customId: props.policyInfo.customer_id
  }
  let res = null
  try {
    res = await queryWelfarePeResultList(data)
  } catch (err) {
    console.log('err', err)
  } finally {
    loading.value = false
  }
  if (res?.isSuccess) {
    dataSource.value = res.data.recode
    pagination.total = Number(res.data.total)
  }
}
onMounted(async () => {
  getPeTableList()
  getResultList()
})
function openDetailModal(info) {
  //福利接口中 如果返回的内容中规则编码为空，使用详情按钮不能使用 现在接口中返回的存在空的规则编码
  if (!info.rulDetNo) return
  emit('openDetailModal', { ...info, detailTitle: info.notes })
}
</script>
<template>
  <div class="pe-rules-info">
    <div class="pe-title">{{ $t('home.welfare.PENotes') }}</div>
    <a-table
      :loading="peLoading"
      :pagination="false"
      :bordered="false"
      :scroll="noteDataSource.length > 3 ? { y: 144 } : {}"
      class="ant-table-striped pe-note-table"
      :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
      size="middle"
      :dataSource="noteDataSource"
      :columns="dynamicNoteColumns"
    >
    </a-table>
    <div class="pe-title pe-rule">{{ $t('home.welfare.PRules') }}</div>
    <a-table
      :loading="peLoading"
      :pagination="false"
      :bordered="false"
      :scroll="ruleDataSource.length > 3 ? { y: 144, x: 1980 } : { x: 1820 }"
      class="ant-table-striped"
      :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
      size="middle"
      :dataSource="ruleDataSource"
      :columns="dynamicRuleColumns"
    >
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.key === 'action'">
          <span
            class="table-operation"
            :class="{ 'operation-disabled': !record.rulDetNo }"
            @click="openDetailModal(record)"
            >{{ $t('home.welfare.UsageDetails') }}</span
          >
        </template>
        <template v-else-if="column.key === 'limitVal'">
          <span :class="{ 'font-red': record.remainingVal && record.remainingVal == 0 }">
            {{
              record.limitVal
                ? `${record.limitVal} ${record.currencyName}`
                : `${formatColumn(text)}`
            }}
          </span>
        </template>
        <template v-else-if="column.key === 'remainingVal'">
          <span :class="{ 'font-red': record.remainingVal && record.remainingVal == 0 }">
            {{
              record.remainingVal
                ? `${record.remainingVal} ${record.currencyName}`
                : `${formatColumn(text)}`
            }}
          </span>
        </template>
        <template v-else>
          <span
            class="break-word"
            :class="{ 'font-red': record.remainingVal && record.remainingVal == 0 }"
            >{{ formatColumn(text) }}</span
          >
        </template>
      </template>
    </a-table>
    <div class="pe-title pe-rule">{{ $t('home.welfare.SpecialRules') }}</div>
    <a-table
      :loading="peLoading"
      :pagination="false"
      :bordered="false"
      :scroll="specialRuleDataSource.length > 3 ? { y: 144 } : {}"
      class="ant-table-striped pe-special-table"
      :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
      size="middle"
      :dataSource="specialRuleDataSource"
      :columns="dynamicSRColumns"
    >
    </a-table>
    <div class="pe-title pe-rule pe-result">
      <span class="arrow cursor-pointer" @click="changeArrow">
        {{ $t('home.welfare.PEConclusion') }}
      </span>
      <svg-icon
        @click="changeArrow"
        class="arrow-icon"
        size="14"
        :name="arrowUp ? 'arrow-up' : 'arrow-down'"
      />
    </div>
    <a-table
      v-show="arrowUp"
      tableLayout="fixed"
      :scroll="{ x: 1920 }"
      :pagination="pagination"
      :bordered="false"
      :loading="loading"
      class="ant-table-striped"
      :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
      size="middle"
      :dataSource="dataSource"
      :columns="dynamicPCColumns"
    >
    </a-table>
  </div>
</template>
<style lang="scss">
.pe-rules-info {
  .ant-table-striped th,
  .ant-table-striped td {
    border-top: transparent !important;
    border-bottom: transparent !important;
  }
}
</style>
<style lang="scss" scoped>
:deep(.font-red) {
  color: #cf595d;
}
:deep(.break-word) {
  word-break: break-all;
}
.pe-rules-info {
  margin-top: 4px;
  .pe-note-table {
    // width: 1372px;
  }
  .pe-special-table {
    // width: 726px;
  }
  .pe-title {
    font-weight: bold;
    font-size: 16px;
    color: #4d789c;
    border-left: 3px solid #4d789c;
    padding-left: 8px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
  }
  .pe-rule {
    margin-top: 30px;
  }
  .pe-result {
    .svg-icon {
      color: #666;
      margin-left: 10px;
      cursor: pointer;
    }
  }
}

.text-decoration {
  text-decoration-line: underline;
  font-size: 14px;
  color: #4d789c;
  cursor: pointer;
}
.text-decoration:hover {
  color: #97b7c5;
}
:deep(.font-red) {
  color: #cf595d;
}

.ant-table-striped {
  border: 1px solid #f0f0f0;
}
.ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa;
  border-top: transparent !important;
  border-bottom: transparent !important;
}
</style>
